<!--
 * @Author: LiZhiWei
 * @Date: 2025-07-14 08:58:30
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:29:57
 * @Description: 
-->
<template>
  <Scaffold ref="scaffoldRef" :entity="entity" :actions="actions" @on-fetched="handleFetch">
    <template #column_avatar_url="{ row }">
      <MAvatar :url="row.avatar_url" :size="48" :name="row.real_name" />
    </template>

    <template #column_real_name="{ row }">
      <div>
        {{ row.real_name }}
        <span v-if="row.staff_code" class="color-info font-s-14px">({{ row.staff_code }})</span>
      </div>
      <div class="color-info">
        {{ row.gender_txt }}
      </div>
    </template>

    <template #column_positions="{ row }">
      {{ joinBy(row.positions, 'position_name') }}
    </template>

    <template #option_account="{ row }">
      <span
        v-action="actions.account"
        class="i-custom-password hover-color-primary wh-14px cursor-pointer"
        @click="handleAccount(row)"
      ></span>
    </template>
  </Scaffold>

  <Editor
    v-model:visible="editDialog.visible"
    :entity-id="editDialog.id"
    title="账号"
    :request-url="editUrl"
  />
</template>

<script setup lang="ts">
  import { api } from '#/api'
  import { useEditor } from '#/hooks/useEditor'
  import { joinBy } from '#/utils'
  import { getActions } from '#/utils/auth'

  defineOptions({
    name: `${entity}Index`,
  })
  const entity = 'Personnel'
  const actions = { ...getActions('system-personnel'), account: 'system-personnel-account' }

  const scaffoldRef = ref()

  const { editDialog, showEditor } = useEditor({ entity })

  const editUrl = computed(() => ({
    edit: api[entity].account(editDialog.value.id),
    update: api[entity].account(editDialog.value.id),
  }))
  const handleAccount = (data: any) => {
    showEditor(data.id)
  }
</script>
